# Stepper

Компонент отображения состояния пошагового процесса.

## Installation
`npm i @snack-uikit/stepper`

[Changelog](./CHANGELOG.md)

#### Использование

Компонент принимает массив шагов. В проп children принимает render-колбек, в который отдает сам компонент, методы управления и поля состояния.
При вызове метода `goNext` вызывается валидация текущего шага. Функция валидации принимает индекс текущего шага и должна вернуть результат валидации в Promise<boolean>. При успешной валдиции компонент переходит на следующий шаг, а при ошибке остается на текущем.
При вызове метода `goPrev` компонент переходит на предыдущий шаг.


```tsx
const steps = [
  { title: 'Step #1' },
  { title: 'Step #2' },
  { title: 'Step #3' },
  { title: 'Step #4' },
];

// ...

return (
  <Stepper steps={steps} validator={validatorFunction}>
    {({
        stepper, // JSX элемент компонента
        isCompleted, // состояние завершенности всей цепочки
        goNext, // функция перехода к след. шагу
        goPrev, // функция перехода к предыдущему шагу
        setValidator, // функция установки валидатора
      }) => (
      <>
        {stepper}

        <button onClick={() => goPrev()}>go back</button>
        <button onClick={() => goNext()}>go next</button>
      </>
    )}
  </Stepper>
)
```
[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Stepper
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| children* | `({stepper, ...api}) => ReactElement` | - | Render function. Принимает аргументы: `stepper` - JSX-элемент степпера, `goNext(stepIndex?: number)` - перейти на след. шаг, `goPrev(stepIndex?: number)` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` переопределяет функцию-валидатор, которая принимает в параметры индекс текущего шага и индекс нового, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов. |
| steps* | `StepData[]` | - | Массив шагов |
| defaultCurrentStepIndex | `number` | - | Индекс текущего шага по-дефолту |
| validator | `StepsValidator` | - | Валидатор шагов. Выполняется при смене шага. Принимает первым аргументом индекс текущего, вторым - индекс нового шага. |
| className | `string` | - | CSS-класс |
| onChangeCurrentStep | `(newValue: number, prevValue: number) => void` | - | Колбек смены текущего степа |
| onCompleteChange | `(isCompleted: boolean) => void` | - | Колбек изменения завершенности |


[//]: DOCUMENTATION_SECTION_END
